草庐IT

php - 在 Twig 模板中包含 SVG

全部标签

javascript - 可以将 HTML dom 元素拖放到 SVG dom 元素上吗?

我目前正在使用RaphaëlJS(愿意切换到jQuerySVG)和jQueryUI来尝试制作棋盘游戏的原型(prototype)。它与Risk有点相似,因为棋盘是一张map,您可以(希望很快)将棋子从map上的一个区域拖到另一个区域(比如从A到B)并将它们放在那里。一旦下降,它会触发回调来做一些工作。现在我一直在尝试获取拖放功能。我想拖动一个html元素(div)并将其放到SVG元素上。我对SVG不是很熟悉,但据我了解,要使HTML和SVGDOM一起工作,需要克服一些问题。我有两个版本,我正在尝试让jQueryUI拖/放到其中任何一个。一种是将jQuerySVG与svgdom插件+jQ

javascript - KnockoutJS 和递归模板

我看过thisquestion,并且使用它的方法会在JS控制台上抛出错误UncaughtSyntaxError:Unexpectedtoken)。我正在尝试获取一个递归的类别数组,它有一个Children属性,它是一个类别数组,并使用jquery模板构建它们。我尝试过的每种方法都会导致一些语法错误。我已经验证对象在javascript中正确显示(它来自MVC3,使用@Html.Raw(Json.Encode(Model.Categories))将其放入JS数组)。这是原始的csharp类publicclassCategoryTreeModel{publicintId{get;set;}

javascript - 当 svg 的高度动态变化时如何使用 viewbox

我有一个可调整大小的div。它有两个内部div。其中一个内部div中有一个svg元素。在svg元素中,我动态地添加和删除内容,这样每次我都在我的svg中添加内容。我通过向它添加20px来增加它的高度,当我删除它时,我将高度减去20px。当我的svg高度变得大于其父div时,父div中会出现一个滚动条。同样,当svg高度小于父div时,滚动条将被删除。当我调整大小时问题就开始了。我在我的svg中添加了一个viewbox选项来调整大小。但是当我增加大小时,我的一些svg元素是不可见的。当我减小尺寸时,我的svg被放置在较低的位置,留下空白空间。在我的脑海里,如何用viewbox属性处理sv

javascript - 是否可以将 SVG 对象的自定义属性设置为数字而不是字符串?

我正在为SVG-G元素(SVG组对象)分配人工属性。我使用SVG转换移动组及其内容,并将组的x/y坐标及其宽度/高度存储在这些属性中。我正在使用D3Javascript库和调用:embeddedElemContainer=nodeBoxContainer.append('svg:g').attr('x',x).attr('y',y).attr('width',width).attr('height',height)结果如下:没关系,唯一困扰我的是属性值存储为字符串。如果我想将它们用于某些计算,我必须强制转换。parseInt(@embeddedElemContainer.attr('x

javascript - 缩放传单 map 时,SVG 圆圈不会重新定位

我正在使用d3在传单map上添加svg圆圈。我的fiddle在这里http://jsfiddle.net/nextstopsun/C3U8g/我添加了一个reset()函数来映射viewreset事件,以计算包含所有圆圈的svgg元素的转换。此函数在mapView重置事件中调用。svg.attr("width",topRight[0]-bottomLeft[0]).attr("height",bottomLeft[1]-topRight[1]).style("margin-left",bottomLeft[0]+"px").style("margin-top",topRight[1]+

javascript - angularjs 指令将名称属性绑定(bind)到模板元素

我正在尝试在select上创建一个包装器指令,并且我正在尝试将“name”属性分配给select指令我的指令定义为mainApp.directive('selectformfield',function(){return{restrict:'E',transclude:true,scope:{label:'@',id:'@',selectedval:'=',options:'=',name:'='},template:"--select--"};});我试图通过Controller中的myform访问select的name属性,例如console.log($scope.myForm.o

javascript - SVG 仅在 safari 中悬停时调整大小

我有一个svg在safari中悬停时调整大小的奇怪问题。我正在使用jquery的悬停将页面上的svg替换为稍微不同的svg。这项工作在除safari之外的所有浏览器中都能正常工作,safari出于某种原因会在鼠标悬停和鼠标移出时完全调整svg的大小。我的svg的高度是在css中设置的img.svg-graphic{height:180px;}并以图片的形式显示在页面上当我将鼠标悬停在容器上时,我将svg换成另一个,然后在悬停时返回默认值。$('.container').hover(function(){$('.svg-graphic').attr('src','svg-icons/ve

javascript - 将数据传递给 d3.svg.line()

所以,我有一个像这样的Javascript对象:-对象{数据:Array[39],时间:Array[39]}object.data是一个值数组,而object.time是一个javascript的日期对象数组。我正在尝试在D3中绘制折线图。我的代码的相关部分://Linefunctionvarline=d3.svg.line().x(function(d,i){returnx(d.time);}).y(function(d,i){returny(d.data);});//DrawLinesvg.append("path").datum([data]).attr("class","lin

javascript - 在 Ember.js Handlebar 模板表达式中呈现动态生成的 {{link-to}} 链接

我有一个Ember模板,它使用Handlebar表达式呈现文本,即{{caption}}.呈现的文本中有主题标签,我需要将每个主题标签设为可点击,并转到Ember应用程序中的特定路径。我创建了一个帮助程序来解析文本,并将每个主题标签替换为指向与主题标签相结合的必要路线的链接,因此现在Handlebar表达式如下所示:{{clickable-hashtagscaption}}.但是,帮助程序使用常规HTML创建链接标签,这是使用Ember.Handlebars.SafeString返回的。我想使用Ember的{{#link-to}}每个主题标签的辅助方法,但似乎无法弄清楚如何做到这一点。

javascript - 如何使用 React.js 在 Sails.js 上渲染服务器端模板?

我正在尝试使用Sails.js和React构建同构应用程序。客户端部分很简单。但是我遇到了服务器端渲染的问题。当我尝试使用React服务器渲染一个*.jsx文件时,我得到了这个:renderToString():YoumustpassavalidReactElement我正在使用sailsjs、react和sails-hook-babel(针对ES6语法)。./assets/components/Auth.jsx:importReactfrom'react';exportclassAuthextendsReact.Component{constructor(props){super(p